<script setup>
import {onMounted, reactive, ref} from "vue";
import {useRoute} from "vue-router";
import {$ajax, apiUrl} from "@/utils/ajax";
import {ElMessage} from "element-plus";
import router from "@/router";

const product = reactive([])
const selectProduct = reactive([])
const packData = ref({})

const route = useRoute()
const addProduct = () => {
  product.unshift({pack: route.params.id, attr: '', number: 1, price: 0, product: '',type: 2})
}
const loading = ref(false)
onMounted(() => {
  $ajax.get(`${apiUrl}admin/product/lst`).then(({data: {result}}) => {
    selectProduct.splice(0, selectProduct.length, ...result)
  })
  if (route.params.id) {
    $ajax.get(`${apiUrl}admin/pack_bag/detail`, {params: {id: route.params.id}}).then(({data: {result}}) => {
      packData.value = result
      product.splice(0, product.length, ...result.product)
    })
  }
})
const mathPrice = row => {
  let price = 0
  if (row.product) {
    price = selectProduct.find(item => item.id === row.product)?.prices || 0
  }
  row.price = parseFloat(price) * row.number
  return row.price
}
const saveProduct = () => {
  if (product.length < 1) return ElMessage.error("请添加产品！")
  let flag = true;
  product.forEach(item => {
    if (!item.product) flag = false
    if (!item.number) flag = false
    if (!item.attr) flag = false
    if (!item.pack) flag = false
    if (!item.price) flag = false
  })
  if (!flag) return ElMessage.error("产品信息不完整！")
  loading.value = true
  $ajax.post(`${apiUrl}admin/pack_bag/product`, {pack: packData.value.id, product}).then(() => {
    router.replace({name: 'pack'})
    loading.value = false
  }).catch(() => loading.value = false)
}
</script>

<template>
  <!--  {{ pack }}-->
  <div class="breadcrumb">
    <el-breadcrumb>
      <el-breadcrumb-item :to="{name:'home'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{name:'pack'}">礼包管理</el-breadcrumb-item>
      <el-breadcrumb-item>筛选产品</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <div class="search">
    <el-button type="primary" @click="addProduct" :loading="loading">添加商品</el-button>
    <el-button type="primary" @click="saveProduct" :loading="loading">保存</el-button>
  </div>
  <el-table :data="product" border size="small" stripe v-if="Object.keys(packData).length" height="80vh"
            v-loading="loading">
    <el-table-column label="礼包" width="100">
      <template #default>
        {{ packData?.name }}
      </template>
    </el-table-column>
    <el-table-column label="规格礼包">
      <template #default="{row}">
        <el-select v-model="row.attr" placeholder="请选择规格礼包" filterable>
          <el-option v-for="item in packData?.productAttr" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="产品">
      <template #default="{row}">
        <el-select v-model="row.product" placeholder="请选择产品" filterable>
          <el-option v-for="item in selectProduct" :key="item.id" :label="item.name" :value="item.id"/>
        </el-select>
      </template>
    </el-table-column>
    <el-table-column label="数量">
      <template #default="{row}">
        <el-input-number v-model="row.number" :min="1"/>
      </template>
    </el-table-column>
    <el-table-column label="领取限制">
      <template #default="{row}">
        <el-radio-group v-model="row.type" v-if="row.type">
          <el-radio-button label="固定" :value="1"/>
          <el-radio-button label="单选" :value="2"/>
        </el-radio-group>
      </template>
    </el-table-column>
    <el-table-column label="价值" width="50">
      <template #default="{row}">
        <!--        <el-input v-model="row.price" type="number"/>-->
        {{ mathPrice(row) }}
      </template>
    </el-table-column>
    <el-table-column label="操作" width="50">
      <template #default="{row}">
        <el-button type="danger" link @click="product.splice(product.indexOf(row), 1)" icon="delete"/>
        <!--        <el-button type="primary" link icon="setting"/>-->
      </template>
    </el-table-column>
  </el-table>
</template>

<style scoped lang="less">

</style>
